<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>${activity.title}</title>
<link href="${res_url}wxcj/style.css" rel="stylesheet" type="text/css">
<link href="${res_url}wxcj/webBox.css" rel="stylesheet"/>
<link href="${res_url}wxcj/msgBox.css" rel="stylesheet"/>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="${res_url}wxcj/js/awardRotate.js"></script>
<script type="text/javascript" src="${res_url}wxcj/js/command.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script type="text/javascript">
var turnplate={
		restaraunts:[],				//大转盘奖品名称
		colors:[],					//大转盘奖品区块对应背景颜色
		outsideRadius:192,			//大转盘外圆的半径
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:68,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		
		bRotate:false				//false:停止;ture:旋转
};

$(document).ready(function(){
	//动态添加大转盘的奖品与奖品区域背景颜色
	turnplate.restaraunts = ${awardNames}; 
	turnplate.colors = ${colors};
	var rotateTimeOut = function (){
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){ 
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};

	//旋转转盘 item:奖品位置; txt：提示语;
	var rotateFn = function (item, txt){
		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
		if(angles<270){
			angles = 270 - angles; 
		}else{
			angles = 360 - angles + 270;
		} 
		$('#wheelcanvas').stopRotate();
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:8000,
			callback:function (){
				document.getElementById('winScore01Id').innerHTML=txt;
				document.getElementById('gameWinId').style.opacity=1;
				document.getElementById('gameWinId').style.webkitTransform='scale(1)';
				document.getElementById('submitUserInfoId').onclick=function(){
					submitUserInfo();
				}
				//document.getElementById('prizeId').innerHTML=txt;
				//document.getElementById('yeslotteryId').style.opacity=1;
				//document.getElementById('yeslotteryId').style.webkitTransform='scale(1)';
				turnplate.bRotate = !turnplate.bRotate;
			}
		});
	};
	function submitUserInfo(){
		var mobileNumber=document.getElementById('mobileNumberId').value;
		if(!isMobileNumber(mobileNumber)){
			msgBox('请输入正确的手机号码！');
			return false;
		}
		var postData={openid:"${openid}",mobilephone:mobileNumber,appId:"${app.id}"};
	    $.post("/wx/luck/submitInfo", postData, function(rs){
	      	 if (rs.code == 0) {
		      		document.getElementById('gameWinId').style.display='none';
		    		document.getElementById('prizeId').innerHTML=$("#winScore01Id").html();
		    		document.getElementById('yeslotteryId').style.opacity=1;
		    		document.getElementById('yeslotteryId').style.webkitTransform='scale(1)';
               } else {
            	   msgBox(rs.msg);
               }
	      }, 'json');
	}
	$('.pointer').click(function (){
		if(turnplate.bRotate)return;
		turnplate.bRotate = !turnplate.bRotate;
		//获取随机数(奖品个数范围内)
		var item = 1;
		var postData={openid:"${openid}",aid:"${activity.id}"};
	    $.post("/wx/luck/lottery", postData, function(rs){
	      	 if (rs.code == 0) {
	      			rotateFn(rs.data.item, turnplate.restaraunts[rs.data.item-1]);
	               } else {
	            	   if(rs.code==10001){//未关注，弹出提示层
	            		   document.getElementById('wx_account_div').style.opacity=1;
		   		    	   document.getElementById('wx_account_div').style.webkitTransform='scale(1)';
	            	   }else{
	            	   		msgBox(rs.msg);
	            	   }
	               }
	      	turnplate.bRotate = !turnplate.bRotate;
	      }, 'json');
	});
});

function rnd(n, m){
	var random = Math.floor(Math.random()*(m-n+1)+n);
	return random;
	
}
function shareWeixin(){
	var shareImg='';
	var bodyObj = document.body;//页面body节点对象
	var loadingBox = document.createElement("div");//Loading对象
	bodyObj.appendChild(loadingBox);//新建的对象加入页面
	loadingBox.innerHTML='<div style="position: fixed;top:5px;right:10px; "><img src="'+shareImg+'" /></div>';
	loadingBox.id="loadingBox_by_gzy_weixin";
	loadingBox.style.zIndex='9999999';
	loadingBox.className="loadingBox";
	loadingBox.style.height=document.documentElement.clientHeight+'px';
	loadingBox.onclick=function(){
		closeShareWeixinBox();
	}
	function closeShareWeixinBox(){
		bodyObj.removeChild(loadingBox);
	}
	
}

//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
	drawRouletteWheel();
	document.getElementById('infoBtnId02').onclick=function(){
		shareWeixin();
	}
};

function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
	  //根据奖品个数计算圆周角度
	  var arc = Math.PI / (turnplate.restaraunts.length/2);
	  var ctx = canvas.getContext("2d");
	  //在给定矩形内清空一个矩形
	  ctx.clearRect(0,0,422,422);
	  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
	  ctx.strokeStyle = "#FFBE04";
	  //font 属性设置或返回画布上文本内容的当前字体属性
	  ctx.font = '16px Microsoft YaHei';      
	  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
		  var angle = turnplate.startAngle + i * arc;
		  ctx.fillStyle = turnplate.colors[i];
		  ctx.beginPath();
		  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
		  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
		  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
		  ctx.stroke();  
		  ctx.fill();
		  //锁画布(为了保存之前的画布状态)
		  ctx.save();   
		  
		  //----绘制奖品开始----
		  ctx.fillStyle = "#E5302F";
		  var text = turnplate.restaraunts[i];
		  var line_height = 17;
		  //translate方法重新映射画布上的 (0,0) 位置
		  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
		  
		  //rotate方法旋转当前的绘图
		  ctx.rotate(angle + arc / 2 + Math.PI / 2);
		  
		  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
		  if(text.indexOf("M")>0){//流量包
			  var texts = text.split("M");
			  for(var j = 0; j<texts.length; j++){
				  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
				  if(j == 0){
					  ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
				  }else{
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }
		  }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 
			  text = text.substring(0,6)+"||"+text.substring(6);
			  var texts = text.split("||");
			  for(var j = 0; j<texts.length; j++){
				  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
			  }
		  }else{
			  //在画布上绘制填色的文本。文本的默认颜色是黑色
			  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
		  }
		
		  //把当前画布返回（调整）到上一个save()状态之前 
		  ctx.restore();
		  //----绘制奖品结束----
	  }     
  } 
}

</script>
</head>
<body>
<div class="main" id="mainId">
	<div class="banner">
		<div class="turnplate" style="background-image:url(${res_url}wxcj/images/turnplate-bg.png);background-size:100% 100%;">
			<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
			<img class="pointer" src="${res_url}wxcj/images/turnplate-pointer.png"/>
		</div>
	</div>
<div class="infoBox">
    	<div class="infoBoxCon">
        	<div class="title">
            	活动说明
            </div>
           	 <p class="f_orange">每个微信号可参与一次，100%中奖哦！</p>
           	 <p class="f_orange">活动日期：即日起至2016年11月11日23:59分结束</p>
           	  <p class="f_orange">参与方法：关注XXXX公众号，点击幸运转盘->玩转转盘菜单</p>
        </div>
    </div>
    
    <div class="h10"></div>

    <div class="infoBox">
    	<div class="infoBoxCon">
        	<div class="title">
            	优惠券使用说明
            </div>
           <p class="f_orange">到指定的商家门店出示您的优惠券给商家即可！</p>
           <p class="f_orange">查看我的优惠券入口：XXXX公众号，点击幸运转盘->查看优惠券菜单</p>
        </div>
    </div>
<div class="yeslottery" id="yeslotteryId">
    	<div class="infoBox">
            <h1 id="prizeId">奖品</h1>
            <div class="h10"></div>
            <p class="f12">将活动分享出去，还可以再玩一次喔！（分享至朋友圈或微信好友各增加一次抽奖机会）</p>
            <div class="h10"></div>
            <div class="infoBtn" id="infoBtnId02">
                我要分享
            </div>
            <div class="h10"></div>
        </div>
    </div>
    <div class="yeslottery" id="wx_account_div">
    	<div class="infoBox">
            <h1>${app.name}官方公众号</h1>
            <p><img width="200px" id="wx_qr_code_img" src="${static_url}${app.qrCodeUrl}" alt="" />  </p>
            <div class="h10"></div>
            <p class="f12">长按图片识别二维码即可参与</p>
            <div class="h10"></div>
        </div>
    </div>
    <div class="gameWin" id="gameWinId">
    	<div class="infoBox">
        	<h1>恭喜您获得<span id="winScore01Id"></span></h1>
            <div class="h10"></div>
            <p class="f12">输入您真实的手机号才可领取哦</p>
             <div class="h5"></div>
            <p>
            	<input type="text" name="mobileNumber" id="mobileNumberId" value="" placeholder="填写您的手机号" maxlength="11" />
            </p>
            <div class="h10"></div>
            <div class="infoBtn" id="submitUserInfoId">
            	提 交
            </div>
            <div class="h10"></div>
        </div>
    </div>
      <div class="h20"></div>
    </div>
    
    <script>


wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '${wxAppId}', // 必填，公众号的唯一标识
    timestamp: '${appData.timestamp}', // 必填，生成签名的时间戳
    nonceStr: '${appData.noncestr}', // 必填，生成签名的随机串
    signature: '${appData.signature}',// 必填，签名，见附录1
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
   //分享到朋友圈
	var shareTimeline={
	   title:"${activity.title}",
	   desc:"${activity.summary}",
	   imgUrl:"${static_url}activity/pic1.png",
	   link:"${wx_base_url}luck?aid=${activity.id}",
	   success: function (res) {
			var postData={openid:"${openid}",aid:"${activity.id}",type:1};
		    $.post("/wx/luck/share", postData, function(rs){
		    	if(rs.code==0){
		    		if(rs.data.add_count>0){
		    			msgBox("增加了"+rs.data.add_count+"次抽奖机会");
		    		}
		    	}
		      }, 'json');
	    },
	    cancel: function (res) {
	       
	    }
	};
   //发送给朋友
	var shareAppMessage={
	   title:"${activity.title}",
	   desc:"${activity.summary}",
	   imgUrl:"${static_url}activity/pic1.png",
	   link:"${wx_base_url}luck?aid=${activity.id}",
	   success: function (res) {
			var postData={openid:"${openid}",aid:"${activity.id}",type:2};
		    $.post("/wx/luck/share", postData, function(rs){
		    	if(rs.code==0){
		    		if(rs.data.add_count>0){
		    			msgBox("增加了"+rs.data.add_count+"次抽奖机会");
		    		}
		    	}
		      }, 'json');
	    },
	    cancel: function (res) { 
	    }
	};
	wx.ready(function(){
		wx.hideMenuItems({
		    menuList: ["menuItem:copyUrl","menuItem:openWithSafari","menuItem:openWithQQBrowser","menuItem:originPage","menuItem:share:QZone","menuItem:share:weiboApp","menuItem:share:qq"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
		});
		wx.onMenuShareTimeline(shareTimeline);
		wx.onMenuShareAppMessage(shareAppMessage);
	}); 
</script>
</body>
</html>

